<?php

$groups = array();
$zones = array();

$activeGroup = 'Select group';
$activeZone = false;
foreach($shippingZones as $index => $zone){
	$groups[$index] = substr($zone['name'], 0, strpos($zone['name'], ","));
	$zones[$zone['id']] = $zone['name'];

	if($activeShippingZone == $zone['id']){
		$activeGroup = $groups[$index];
		$activeZone = $zones[$zone['id']];
	}
}

?>
<?php include_partial('homepage/customdropdown',
		array(
			'choices' => array_unique($groups),
			'input' => array(
				'class' => 'grouped_zone',
				'label' => $activeGroup,
				'plugin_input_id' => 'foo',
				'input_id' => 'foo2',
				'name' => 'zone_group',
				'value' => $activeGroup)
			)
	)
?>
<div class="clear"></div>
<?php include_partial('homepage/customdropdown',
		array(
			'choices' => $zones,
			'input' => array(
				'class' => 'grouped_zone',
				'label' => $activeZone,
				'plugin_input_id' => 'zone',
				'input_id' => 'zone2',
				'name' => 'zoneID',
				'value' => $activeShippingZone)
			)
	)
?>
<div class="clear"></div>
<script type="text/javascript">
$(document).ready(function(){
	$( "#foo" ).bind( "autocompleteselect", function(event, ui) {
		$( "#zone" ).parents('.custom-dropdown').find('.dropdownlabel').trigger('click');
		$('#zone').autocomplete( "search", ui.item.label);
	}).click(function(){
		$(this).autocomplete( "search", ""  );
	});



	$('#zone').click(function(){
		 if($("#foo").val()){
			 $("#zone").autocomplete("search", $("#foo").val());
		 }else if($("#foo2").val()){
			 $("#zone").autocomplete("search", $("#foo2").val());
		 }
	});

	// triggered when dropdown updates its value
	$('#zone').parents('.custom-dropdown').bind("updated", function(){
		$(this).parents('form').trigger('changed');
	});
});
</script>

